@mixin mainLeftWidth ($mainLeftWidth:22rem) {
    .main-left {
        width: $mainLeftWidth;
    }

    .header_left {
        width: $mainLeftWidth;
    }

}

@mixin tagViewsHeight($tagViewsHeight:3.6rem) {
    .tags-view {
        height: $tagViewsHeight;
    }

    .system-main {
        height:calc(100% - #{$tagViewsHeight});
    }
}

@mixin headerFooterHeight($headerHeight:7rem, $footerHeight:4rem) {
    header {
        height: $headerHeight;
        line-height: $headerHeight;
    }

    .main {
        height: calc(100vh - #{$headerHeight} - #{$footerHeight});
    }

    // .footer {
    //     height: $footerHeight;
    //     line-height: $footerHeight;
    // }
}

@include mainLeftWidth ($mainLeftWidth:20rem);
@include tagViewsHeight($tagViewsHeight:3.6rem);
@include headerFooterHeight($headerHeight:7rem, $footerHeight:4rem);

// @media screen and (max-width: 1440px) and (min-width:1600px){
//     body,html{
//         font-size:7px;
//     }
//     @include mainLeftWidth($mainLeftWidth:200px);
//     @include tagViewsHeight($tagViewsHeight:36px);
//     @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }

// @media screen and (max-width: 1600px) and (min-width:1680px){
//     body,html{
//         font-size:8px;
//     }
//     @include mainLeftWidth($mainLeftWidth:170px);
//     @include tagViewsHeight($tagViewsHeight:36px);
//     @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }

// @media screen and (max-width: 1680px) and (min-width:1920px){
//     body,html{
//         font-size:9px;
//     }  
//     @include mainLeftWidth($mainLeftWidth:170px);
//     @include tagViewsHeight($tagViewsHeight:36px);
//     @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }



// @media screen and (max-width: 1920px){
//     body,html{
//         font-size:10px;
//     }
//     @include mainLeftWidth($mainLeftWidth:170px);
//     @include tagViewsHeight($tagViewsHeight:36px);
//     @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }









//  @media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
//     (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
//     (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
//     body,html{
//         font-size:10px;
//     }
//     //     @include mainLeftWidth($mainLeftWidth:170px);
//     //     @include tagViewsHeight($tagViewsHeight:36px);
//     //     @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }

// // 1440*900  //125%
// @media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
//     (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
//     (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
//         body,html{
//             font-size:9px;
//         }
//         @include mainLeftWidth($mainLeftWidth:170px);
//         @include tagViewsHeight($tagViewsHeight:34px);
//         @include headerFooterHeight($headerHeight:60px,$footerHeight:0px)
// }
// @media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
//     (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
//     (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
//         body,html{
//             font-size:8px;
//         }
//         // 关于element 
//         .el-submenu .el-menu-item{
//             height:3rem;
//             line-height:3rem;
//         }
//         @include mainLeftWidth($mainLeftWidth:170px);
//         @include tagViewsHeight($tagViewsHeight:36px);
//         @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }

// // 1440*900 // 150%
// @media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
//     (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
//     (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
//         body,html{
//             font-size:8px;
//         }
//         @include mainLeftWidth($mainLeftWidth:170px);
//         @include tagViewsHeight($tagViewsHeight:30px);
//         @include headerFooterHeight($headerHeight:55px,$footerHeight:0px)

// }
// @media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
//     (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
//     (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
//         body,html{
//             font-size:6px;
//         }
//         @include mainLeftWidth($mainLeftWidth:170px);
//         @include tagViewsHeight($tagViewsHeight:36px);
//         @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }
// @media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
//     (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
//     (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
//         body,html{
//             font-size:5px;
//         }
//         @include mainLeftWidth($mainLeftWidth:170px);
//         @include tagViewsHeight($tagViewsHeight:36px);
//         @include headerFooterHeight($headerHeight:70px,$footerHeight:0px)
// }
// device-pixel-ratio像素比 